import React, { Component } from 'react'
import {connect} from "react-redux"

class Detial extends Component {
    state={
        open:false,
        name:"",
        obj:""
    }
    render() {
        return (
            <div className="boxs">
                <header>
                     收货地址
                </header>
                <div className="main">
                    {
                        this.props.data.length>0&&
                        this.props.data.map((item,index)=>{
                            return <div className="items" key={index}>
                            <dl>
                                <dd>
                                   {item.name}({item.ups})
                                </dd>
                                <dt>
                                    {item.msg}{item.data}
                                </dt>
                            <button onClick={()=>{this.setState({open:true,name:item.name,obj:item})}}>···</button>
                            </dl>
                        </div>
                        })
                    }
                </div>
                <div className={this.state.open?"open s":"open"} >
                    <div onClick={()=>{this.props.history.push({pathname:"/index/det",obj:this.state.obj});this.setState({open:false})}}>修改</div>
                    <div onClick={()=>{this.props.remove(this.state.name);this.setState({open:false})}}>删除</div>
                </div>
                <div className="bottom" onClick={()=>{this.props.history.push("/index/add")}}>
                    新增收货地址

                </div>
            </div>
        )
    }
}

export default connect(
    (state)=>{
        let {data} = state
        return {
            data
        }
    }
    ,(dispatch)=>{
        return {
           remove(obj){
            dispatch({type:"remove",obj})
           }
        }
    }
)(Detial)

